<template>
  <div>
    <div class="card-box">
      <el-card ref="card1" class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">公司简介</span>
        </div>
        <p class="introduceContent">{{ content }}</p>
      </el-card>
    </div>
    <div class="card-box">
      <el-card ref="card1" class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
            <span class="tit">工商信息</span>
        </div>
        <div class="businessBody">
          <p>
            <span>统一社会信用代码</span><b>{{ businessData.credit_no }}</b>
          </p>
          <p>
            <span>经营状态</span><b>{{ businessData.status }}</b>
          </p>
          <p>
            <span>成立日期</span><b>{{ businessData.start_date }}</b>
          </p>
          <p>
            <span>组织机构代码</span><b>{{ businessData.org_no }}</b>
          </p>
          <!-- <p><span>所属行业</span><b>{{businessData.industry}}</b></p> -->
          <p>
            <span>营业期限</span><b>{{ businessData.term_end || '无固定期限' }}</b>
          </p>
          <!-- <p><span>注册号</span><b>{{businessData.reg_no}}</b></p> -->
          <p>
            <span>公司类型</span><b>{{ businessData.econ_kind }}</b>
          </p>
          <!-- <p><span>发照日期</span><b>{{businessData.check_date}}</b></p> -->
          <p>
            <span>法人代表</span><b>{{ businessData.oper_name }}</b>
          </p>
          <p>
            <span>注册资本</span><b>{{ businessData.regist_capi }}</b>
          </p>
          <p>
            <span>登记机关</span><b>{{ businessData.belong_org }}</b>
          </p>
          <p>
            <span>企业地址</span><b>{{ businessData.address }}</b>
          </p>
          <p>
            <span>经营范围</span><b>{{ businessData.scope }}</b>
          </p>
        </div>
      </el-card>
    </div>
    <div class="card-box">
      <el-card ref="card1" class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">主要人员</span>
        </div>
        <div class="memberBody">
          <template v-if="mainMember.length > 0">
            <p v-for="(item, index) in mainMember" :key="index">
                <span>{{ item.job_title }}</span>
                <b>{{ item.name }}</b>
            </p>
          </template>
          <template v-else>
            <p>{{ nothingText }}</p>
          </template>
        </div>
      </el-card>
    </div>
    <div class="card-box">
      <el-card ref="card1" class="elcard" style="flex:1;align-self:normal;">
        <div slot="header" class="hd clearfix">
          <span class="tit">对外投资</span>
        </div>
        <!--对外投资-->
        <div class="invest">
          <div class="branchBody">
            <el-table
              v-loading="loading"
              style="margin-bottom: 20px"
              :data="tableData"
            >
              <el-table-column
                prop="invest_name"
                label="企业名称"
                width="240"
              ></el-table-column>
              <el-table-column
                prop="invest_oper_name"
                label="法人姓名"
              ></el-table-column>
              <el-table-column
                prop="invest_credit_no"
                label="统一社会信用代码"
              ></el-table-column>
              <el-table-column label="成立日期">
                <template slot-scope="scope">
                  <div>
                    {{ scope.row.ctrate_time | ctrate_time }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="invest_status"
                label="状态"
              ></el-table-column>
            </el-table>
            <el-pagination
              background
              @current-change="getCurrentPage"
              layout="prev, pager, next"
              :page-size="ips"
              :current-page="ipi"
              :total="total"
            >
            </el-pagination>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ipi: 1,
      ips: 5,
      total: 0,
      loading: false,
      tableData: [],
      content: "",
      mainMember: [], // 主要人员
      businessData: {}, //工商信息
      nothingText: "暂无信息",
    };
  },
  mounted() {
    this.getContent(); // 简介
    this.information(); // 工商信息
    this.getPersonnel(); // 主要人员
    this.getInvestmentData(); // 对外投资
  },
  filters: {
    ctrate_time(val) {
      function zero(val) {
        return val < 9 ? "0" + val : val;
      }
      if (val) {
        let now = new Date(val);
        let time =
          now.getFullYear() +
          "-" +
          zero(now.getMonth() + 1) +
          "-" +
          zero(now.getDate());
        return time;
      }
    },
  },
  methods: {
    getCurrentPage(val) {
      this.ipi = val;
      this.getInvestmentData();
    },
    // 公司简介
    getContent() {
      this.$post(this.$Url.companyDetail.selectByName, {
        eid: this.$route.query.eid,
        tid: "17cf0131d82e20dcab260ec2bd87bab9",
        ipi: 1,
        ips: 5,
      })
        .then((res) => {
          let data = res.data
          if (data && data.result) {
            this.content = data.result[0] && data.result[0].content;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    information() {
      this.$post(this.$Url.companyDetail.selectByName, {
        eid: this.$route.query.eid,
        tid: "33ae4d5cd5b5e5f65aa89144791c4a70",
        ipi: 1,
        ips: 20,
      })
        .then((res) => {
          this.businessData = res.data.result && res.data.result[0];
          this.getAddress();
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getAddress() {
      this.$post(this.$Url.companyDetail.selectByName, {
        eid: this.$route.query.eid,
        tid: "7c2b74abeec210e0b43dacb246c72cbb",
        ipi: 1,
        ips: 20,
      })
        .then((res) => {
          let data = res.data.result;
          data.forEach((i) => {
            if (i.name === "注册地址") {
              this.$set(this.businessData, "address", i.address);
            }
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getPersonnel() {
      this.$post(this.$Url.companyDetail.selectByName, {
        eid: this.$route.query.eid,
        tid: "06ba63698abb12b6eb5b815b6b11bb2a",
        ipi: 1,
        ips: 20,
      })
        .then((res) => {
          if (res.data.result) {
            this.mainMember = res.data.result;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    getInvestmentData() {
      this.loading = true;
      this.$post(this.$Url.companyDetail.selectByName, {
        eid: this.$route.query.eid,
        tid: "aa0db5d0e91fb921249e31bf2bb9b43a",
        ipi: this.ipi,
        ips: this.ips,
      })
        .then((res) => {
          if (res.data.result) {
            this.total = res.data.page.totalRow;
            this.tableData = res.data.result;
          }
          this.loading = false;
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.card-box {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.elcard {
  position: relative;
  flex: .5;
  padding: 0 !important;
  text-align: left !important;
  ::v-deep {
    .el-card__header {
      position: relative;
      &:before {
        position: absolute;
        top: 50%;
        left: 0;
        width: 5px;
        height: 30px;
        margin-top: -15px;
        content: '';
        background-color: $color101;
      }
    }
  }
  .tit {
    font-size: 14px;
    font-weight: bold;
    i {
      color: #504da6;
    }
  }
  .achievements {
    position: relative;
    li {
      display: block;
      border-bottom: 1px solid #EBEEF5;
      margin-bottom: 10px;
    }
  }
}
.el-row {
  background: #fff;
  margin-bottom: 20px;
}
h3 {
  text-align: left;
  line-height: 50px;
  border-bottom: 1px solid #ddd;
  padding-left: 20px;
}
.introduceContent {
  padding: 30px;
  color: #2b3b75;
  text-align: left;
}
/*工商信息*/
.businessBody {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 20px auto;
}
.businessBody > p,
.memberBody > p {
  display: flex;
  flex-wrap: nowrap;
  width: 33.333%;
  min-height: 57px;
  line-height: 57px;
  margin-bottom: 0;
  text-align: left;
}
.businessBody > p:last-of-type {
  height: auto;
  width: 66.65%;
}
.businessBody > p > span,
.memberBody > p > span {
  width: 35%;
  padding: 0 5px;
  line-height: 25px;
  background: $hoverColor;
  color: $mainColor;
  font-weight: bold;
  border: 1px solid #ececf5;
  border-bottom: none;
  border-left: none;
  text-align: center;
}
.memberBody > p > span {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.businessBody > p > span {
  line-height: 30px;
  padding: 15px 5px;
}
.businessBody > p:nth-of-type(3n-2) > span,
.memberBody > p:nth-of-type(3n-2) > span {
  border-left: 1px solid #ececf5;
}
.businessBody > p > b,
.memberBody > p > b {
  width: 75%;
  padding: 15px;
  color: #838895;
  text-align: justify;
  line-height: 30px;
  border: 1px solid #ececf5;
  border-bottom: none;
  border-left: none;
}
.businessBody > p:last-of-type > b {
  height: auto;
  width: 85%;
}
.businessBody > p:nth-last-child(1),
.businessBody > p:nth-last-child(2) {
  height: auto;
}
.businessBody > p:nth-last-child(1) > span {
  width: 16%;
}
.businessBody > p:nth-last-child(1) > span,
.businessBody > p:nth-last-child(1) > b,
.businessBody > p:nth-last-child(2) > span,
.businessBody > p:nth-last-child(2) > b,
.memberBody > p:nth-last-child(1) > span,
.memberBody > p:nth-last-child(1) > b,
.memberBody > p:nth-last-child(2) > span,
.memberBody > p:nth-last-child(2) > b,
.memberBody > p:nth-last-child(3) > span,
.memberBody > p:nth-last-child(3) > b {
  border-bottom: 1px solid #ececf5;
}
/*主要人员*/
.memberBody {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: 20px auto;
}
.memberBody > p {
  text-align: center;
}
.memberBody > p > span {
  width: 30%;
}
.memberBody > p > b {
  display: inline-flex;
  width: 70%;
  align-items: center;
  justify-content: center;
}

.invest {
  padding: 20px;
}
</style>>
